<template>
  <div>
    <van-nav-bar class="head" title="修改密码" left-text left-arrow @click-left="onClickLeft" />
    <van-form @submit="SubmitfindPwd">
      <van-field
        v-model="user.account"
        type="text"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="user.password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="user.qPassword"
        type="password"
        name="确认密码"
        label="确认密码"
        placeholder="确认密码"
        :rules="[{ required: true, message: '请确认密码' },{
          message:'密码不一致'
        }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { Toast } from "vant";
import { post } from "../api/http";
export default {
  data() {
    return {
      user: {
        qPassword: "",
      },
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/login");
    },
    async SubmitfindPwd() {
      //判断修改密码是否与确认密码一致
      let param = {
        "users.account": this.user.account,
        "users.password": this.user.password,
      };
      if (this.user.password !== this.user.qPassword) {
        return Toast("密码不一致");
      }
      const { data: res } = await post("/clien/findPwd", param);
      console.log(res);
      if (res.code === 200) {
        Toast(res.message);
        setTimeout(() => {
          this.$router.push("/login");
        }, 800);
      }
    },
    onFailed(errorInfo) {
      console.log("failed", errorInfo);
    },
  },
};
</script>

<style>
.van-nav-bar {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  height: 46px;
  line-height: 1.5;
  text-align: center;
  background-color: #069ffd;
  -webkit-user-select: none;
  user-select: none;
}
.van-nav-bar__title {
  color: #ffff;
  padding-top: 0px;
  font-size: 1.5rem;
  text-align: center;
}
.van-nav-bar .van-icon {
  /* color: #1989fa; */
  color: #ffff;
  padding-top: 0px;
  font-size: 1.5rem;
}
</style>
